個(gè)人總結(jié)——vue1.0與vue2.0路由的區(qū)別
vue1.0
html部分————? ? ? ? ?<a v-link="{path:'/home'}">主頁<a/>? 跳轉(zhuǎn)鏈接
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <router-view></router-view>? ? ?顯示內(nèi)容
js部分 ————
1.準(zhǔn)備一個(gè)根組件var App=Vue.extend();//
2. Home News組件都準(zhǔn)備
var Home=Vue.extend({
template:"<h5>我是主頁</h5>"
});var News=Vue.extend({
template:"<h5>我是新聞</h5>"
})
//3. 準(zhǔn)備路由
var router=new VueRouter();
//4. 關(guān)聯(lián)
router.map({ 'home':{ component:Home }, 'news':{ component:News } });
//5. 啟動路由
router.start(App,'#box');
vue2.0路由
html部分
<router-link to="/home">主頁</router-link>? ?跳轉(zhuǎn)鏈接
<router-view></router-view>? ? ? 顯示內(nèi)容
Js部分
1.組件
var? Home = {template:"<h3>主頁</h3>"};
var News = {template:"<h3>新聞</h3>"};
2.配置路由
const routes = [
{path:"/home",component:Home}; //配置路由指向
{path:"/news",component:News}; //配置路由指向
{path:"*",redirect:"/home"};? ?//重定向
]
3.生成路由實(shí)例
const router = new VueRouter({
????routes
})
4.最后掛到vue模塊語句上
new Vue({
????el:"#app",
????router
})
