這篇文章主要介紹引用vue.js使用路由的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
直接引用vue.js使用路由的方法：首先引入【vue.JS】和【vue-router.JS】；然后創建掛載的dom元素，并創建路由組件；接著定義路由，并創建router實例；最后創建vue實例并掛載。
直接引用vue.js使用路由的方法：
直接引入 vue.js 的方式使用路由很簡單, 只需要再直接引入一個 vue-router.JS 即可.
具體的實現步驟:
1, 引入 vue.JS 和 vue-router.JS
<script src="https://unpkg.com/vue/dist/vue.js"> </script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"> </script>
2, 創建掛載的 dom 元素
<div id="app"></App>
3, 創建路由組件
const com1 = {
template: '<div > 路由 1</div>'
}
const com2 = {
template: '<div > 路由 2</div>'
}4, 定義路由
const routes = [
{ path: '/hash2', component: com1 },
{ path: '/hash3', component: com2 }
]5, 創建 router 實例
const router = new VueRouter({
routes
})6, 創建 vue 實例并掛載
const App = new Vue({
router
}).$mount('#app');下面是具體的代碼:
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
Document
</title>
<script src="https://unpkg.com/vue/dist/vue.js">
</script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">
</script>
</head>
<body>
<div id="app">
<h2>
Hello !
</h2>
<p>
<!-- 使用 router-link 組件來導航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
<router-link to="/hash2">
切換至 com1
</router-link>
<router-link to="/hash3">
切換至 com2
</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view>
</router-view>
<!-- router-link 上的其他屬性: -->
<!-- 設置 replace 屬性的話, 當點擊時, 會調用 router.replace() 而不是 router.push(), 導航后不會留下
history 記錄. -->
<!-- <router-link :to="{ path:'/abc'}" replace></router-link> -->
<!-- 有時候想要 <router-link> 渲染成某種標簽, 例如 <li>. 于是我們使用
tag prop 類指定何種標簽, 同樣它還是會監聽點擊, 觸發導航. -->
<!-- <router-link to="/foo" tag="li">foo</router-link> -->
<!-- active-class 設置 鏈接激活時使用的 CSS -->
<!-- event 聲明可以用來觸發導航的事件. 可以是一個字符串或是一個包含字符串的數組. -->
</div>
</body>
<script>
// 1. 定義 (路由) 組件.
const com1 = {
template: '<div > 路由 1</div>'
}
const com2 = {
template: '<div > 路由 2</div>'
}
// 2. 定義路由
// 每個路由應該映射一個組件. 其中 "component" 可以是 通過 Vue.extend()
// 創建的組件構造器, 或者, 只是一個組件配置對象.
const routes = [{
path: '/hash2',
component: com1
},
{
path: '/hash3',
component: com2
}]
// 3. 創建 router 實例, 然后傳 `routes` 配置
const router = new VueRouter({
routes // (縮寫)相當于 routes: routes
})
// 4. 創建和掛載根實例.
// 要通過 router 配置參數注入路由, 從而讓整個應用都有路由功能
const App = new Vue({
router
}).$mount('#app'); //el 是自動掛載, mount 是手動掛載(延時)
</script>
</HTML>以上是“引用vue.js使用路由的方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
